<template>
  <div class="scene">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="info">
        <sceneBaseInfo :data="data" @base-info="handleBaseInfo" />
      </el-tab-pane>
      <el-tab-pane label="测试步骤" name="step">
        <sceneStep @select-nodes="handleSelectStep" :data="data" @all-nodes="handleAllStep" @open-env="updateEnv"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="参数" name="params">
        <sceneParams />
      </el-tab-pane>
      <el-tab-pane label="前/后置" name="prePost">
        <prePostOperation />
      </el-tab-pane>
      <el-tab-pane label="断言" name="assertion">
        <assertion />
      </el-tab-pane> -->
      <el-tab-pane label="执行历史" name="execute">
        <sceneExecuteHistory :data="data" ref="sceneExecuteRef"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="设置" name="setting">
        <setting />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import sceneStep from './sceneStep.vue';
import sceneParams from './sceneParams.vue';
import sceneExecuteHistory from './sceneExecuteHistory.vue';
import prePostOperation from '../../request/prePostOperation.vue';
import assertion from '../../request/assertion.vue';
import setting from '../../request/setting.vue';
import sceneBaseInfo from './sceneBaseInfo.vue';
import { propTypes } from '@/utils/propTypes'
const activeName = ref('info')
const emit = defineEmits(['baseInfo','steps','open-env'])
const props = defineProps({
  data: propTypes.object.def({})
})
const sceneExecuteRef = ref()
const handleClick = (tab, event) => {
  if(tab.paneName == 'execute'){
    sceneExecuteRef.value.getList()
  }
}
const handleBaseInfo = (data) => {
  emit('baseInfo', { baseInfo: data})
}
const handleSelectStep = (data) => {
  // emit('content', { selectedSteps: data })
}
const handleAllStep = (data) => {
  emit('steps', { steps: data})
}
/** 打开环境设置弹窗 */ 
const updateEnv = ()=>{
  emit('open-env')
}
onMounted(() => {
})
</script>

<style scoped lang="scss">
.scene {
  height: 100%;

  .el-col:last-child {
    border-left: 1px solid var(--el-border-color-light);
  }

  .el-tabs {
    height: 100%;

    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
